<template>
	<w-layout showTabbar showNavbar navTitle="抽卡机" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #default>
			<view class="container">
				<scroll-view class="mt-40 mb-60" scroll-x="true" >
					<view class="fr-ac">
						<view @click="typesChange(item,index)" :class="index == types.current?'':'op-70'" class="mr-30 transition" v-for="(item,index) in types.list" :key="index">
							<view class="public-img-2 px-8 py-8">
								<cut-corner :arrow="2" clipSize="10rpx">
									<view>
										<image style="width: 112rpx;height: 112rpx;" class="transition" :src="item.imgurl" mode=""></image>
									</view>
								</cut-corner>
							</view>
							<view :class="index == types.current?'color fs-32':''" class="mt-15 t-c" style="white-space: nowrap;">
								{{item.title}}
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="public-btn-11 px-50 fr-ac" style="height: 90rpx;">
					<view @click="modeChange(0)" :class="state.mode == 0 ?'color':'op-50'" class="mr-60">
						综合排序
					</view>
					<view @click="modeChange(3)" :class="state.mode == 3 ?'color':'op-50'" class="mr-60">
						上新
					</view>
					<view @click="modeChange(2)" class="mr-60 fr-ac">
						<view :class="[1,2].includes(state.mode)?'color':'op-50'" class="mr-10">
							价格
						</view>
						<image v-if="![1,2].includes(state.mode)" style="width: 24rpx;height: 24rpx;" src="/static/icon/public/sort.png" mode=""></image>
						<image v-if="state.mode == 2" style="width: 24rpx;height: 24rpx;" src="/static/icon/public/sort-asc.png" mode=""></image>
						<image v-if="state.mode == 1" style="width: 24rpx;height: 24rpx;" src="/static/icon/public/sort-desc.png" mode=""></image>
					</view>
				</view>
				
				<view class="" style="">
					<view @click="$u.route(`/pages/card_draw/detail?id=${item.id}`)" style="min-height: 320rpx;position: relative;" class="public-card-6 fc px-5 pb-5 pt-40 mt-40" v-for="(item,index) in state.list" :key="index">
						<view class="fr px-40">
							<cut-corner :arrow="2" clipSize="25rpx">
								<image style="width: 150rpx;height: 150rpx;" :src="item.imgurl" mode="widthFix"></image>
							</cut-corner>
							<view class="ml-20 flex-1">
								<view class="fr">
									<view class="flex-1">
										{{item.title}}
									</view>
									<view class="ml-auto color mr-5">
										抽卡
									</view>
									<image style="width: 32rpx;height: 32rpx;" src="/static/icon/public/right-fill.png" mode=""></image>
								</view>
								<view class="fr-ac mt-15">
									<view class="color">
										¥{{item.price}}
									</view>
								</view>
								<view class="fr fw gap-15 mt-20">
									<cut-corner :arrow="3" clipSize="10rpx">
										<view class="color fs-24 px-20 py-8 w-fit" style="background: #1C4B59;">
											{{item.notice}}
										</view>
									</cut-corner>
									<cut-corner v-if="item.is_exchange == 1" :arrow="3" clipSize="10rpx">
										<view class="color fs-24 px-20 py-8 w-fit" style="background: #1C4B59;">
											集换
										</view>
									</cut-corner>
								</view>
								
							</view>
						</view>
						<view class="mt-40 py-20 px-40" style="background: linear-gradient(to right,#1B4B59 0%,#08232F 100%);">
							<scroll-view class="" scroll-x="true" >
								<view class="fr-ac">
									<view class="mr-20" v-for="(item2,index2) in item.goods_list" :key="index2">
										<cut-corner :arrow="2" clipSize="15rpx">
											<image style="width: 80rpx;height: 80rpx;" :src="item2.imgurl" mode="widthFix"></image>
										</cut-corner>
									</view>
								</view>
							</scroll-view>
							<!-- <view class="color fs-24 mt-25">
								可拆出238种稀有卡片
							</view> -->
						</view>
						
					</view>
				</view>
				<no-more :show="state.list.length == 0"></no-more>
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		cardextractor_index,
		cardextractor_goods
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		await get_cardextractor_index()
		get_cardextractor_goods()
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	onReachBottom(()=>{
		if(state.last_limit == state.limit){
			state.page++
			get_cardextractor_goods()
		}
	})
	const page = reactive({
		scrollTop:0
	})
	
	const types = reactive({
		list: [],
		current:0,
	})
	function typesChange(item,index){
		types.current = index
		initData()
		get_cardextractor_goods()
	}
	
	const tabs = reactive({
		current:0,
		list:[
			{
				id:'',
				name:'赏品预览',
			},
			{
				id:'',
				name:'中赏详情',
			}
		]
	})
	function tabChange(e){
		tabs.current = e.index
		console.log(tabs.current)
	}
	
	// 筛选模式切换
	function modeChange(mode){
		if(state.mode == mode && mode == 2){
			state.mode = 1
		}else{
			state.mode = mode
		}
		
		initData()
		get_cardextractor_goods()
	}
	
	const state = reactive({
		mode: 0,
		
		list:[],
		page:1,
		limit:15,
		last_limit:15,
		
		keyword:'',
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 15
	}
	
	async function get_cardextractor_index(){
		const res = await cardextractor_index({})
		types.list = res.category
		
	}
	
	// 商品列表 数据
	async function get_cardextractor_goods(){
		const res = await cardextractor_goods({
			category_id: types.list[types.current].id,
			order_type: state.mode,
			page: state.page
		})
		state.last_limit = res.data.length
		state.list = state.list.concat(res.data)
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 30rpx;
		
	}
	
	.swiper-item{
		width: fit-content;
		height: fit-content;
	}
	.swiper-item-active{
		image{
			width: 250rpx;height: 250rpx;
		}
	}
	.swiper-item-default{
		opacity: 0.7;
		image{
			width: 210rpx;height: 210rpx;
		}
	}
</style>